<template>
  <card :title="title" style="overflow-x: auto">
    <template v-slot:content>
      <div class="content">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="personalWaiting">
            <template slot="title">
              <svg-icon class="svg_icon" icon-class="daisp" />
              <div class="title_name">待审批</div>
            </template>
            <div class="apply_list">
              <div
                class="apply"
                v-for="(item,index) in personalWaiting"
                :key="index"
                @click="handleSelect($event,item,'personalWaiting')"
              >
                <div class="apply_type">{{ item.processDefinitionName }}</div>
                <div class="num">{{ item.num }}</div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="personalFinish">
            <template slot="title">
              <svg-icon class="svg_icon" icon-class="yichuli" />
              <div class="title_name">已处理</div>
            </template>
            <div class="apply_list">
              <div
                class="apply"
                v-for="(item,index) in personalFinish"
                :key="index"
                @click="handleSelect($event,item,'personalFinish')"
              >
                <div class="apply_type">{{ item.processDefinitionName }}</div>
                <div class="num">{{ item.num }}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </template>
  </card>
  <!-- <component class="right" :is="componentName" ref="component" /> -->
  <!-- <personalWaiting class="right"></personalWaiting> -->
</template>

<script>
import card from "@/views/homePage/components/card";
import api from "@/api/workflow/task";

export default {
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  components: {
    card
  },
  data() {
    return {
      activeNames: [],
      // 审批流程列表根据用户权限来展示
      personalWaiting: [
        // {
        //   processDefinitionName: "请假",
        //   num: 2
        // },
        // {
        //   processDefinitionName: "出差",
        //   num: 3
        // },
        // {
        //   processDefinitionName: "采购",
        //   num: 0
        // }
      ],
      personalFinish: [
        {
          processDefinitionName: "请假",
          num: 0
        },
        {
          processDefinitionName: "出差",
          num: 0
        },
        {
          processDefinitionName: "采购",
          num: 10
        }
      ],
      selectApply: {}
    };
  },
  mounted() {
    // 获取待审批和已处理的审批数量
    this.getList();
  },
  methods: {
    async getList() {
      await api.getDefineWaitInfo().then(response => {
        this.personalWaiting = response.data;
      });
      await api.getDefineFinishInfo().then(response => {
        this.personalFinish = response.data;
      });
      // document.querySelectorAll(".apply")[0].className = `apply selected`;
      this.$emit("setComponent", "", "personalWaiting");
    },
    handleSelect(el, apply, component) {
      let length = document.querySelectorAll(".apply").length;
      for (let index = 0; index < length; index++) {
        document.querySelectorAll(".apply")[index].className = `apply`;
      }
      if (el.target.className != "apply") {
        el.target.parentElement.className = "apply selected";
      } else {
        el.target.className = "apply selected";
      }
      this.selectApply = apply;

      this.$emit("setComponent", apply, component);
    },
    handleChange(val){
      if (val.length==0){
        let length = document.querySelectorAll(".apply").length;
        for (let index = 0; index < length; index++) {
          document.querySelectorAll(".apply")[index].className = `apply`;
        }
      }else if (val.length==1){
        if (val[0]=="personalWaiting"){
          let length = document.querySelectorAll(".apply").length;
          for (let index = 12; index < length; index++) {
            document.querySelectorAll(".apply")[index].className = `apply`;
          }
        }else {
          let length = document.querySelectorAll(".apply").length;
          for (let index = 0; index < 12; index++) {
            document.querySelectorAll(".apply")[index].className = `apply`;
          }
        }
        this.$emit("setComponent", "", val[0]);
      }else if (val.length==2){
        this.$emit("setComponent", "", val[1]);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    height: 100%;
    width: 2.6rem;
    margin-right: 0.2rem;
  }
  .right {
    height: 100%;
    width: calc(100% - 2.6rem - 0.2rem);
  }
}
.apply_list {
  width: 100%;
  .apply {
    cursor: pointer;
    padding: 0.125rem 0.2rem 0.125rem 0.55rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.15rem;
    font-weight: 700;
    color: #606266;
    &:hover {
      background-color: #e5f2fe;
      color: #409eff;
    }
  }
  .selected {
    background-color: #e5f2fe;
    color: #409eff;
  }
}
.svg_icon {
  // font-weight: 700;
  color: #606266;
  font-size: 0.25rem;
  margin-right: 0.2rem;
}
.title_name {
  font-weight: 700;
  color: #606266;
  font-size: 0.2rem;
}
</style>
